<div class="overflow-x-auto" style="max-height: 765px; overflow-y: auto;">
    <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
            <tr>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    任务名称
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    所属任务
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    里程碑
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    负责人
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    优先级
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    开始日期
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    截止日期
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    状态
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    操作
                </th>
            </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200" id="tasks-tbody">
            {% set task_count = tasks|length %}
            {% for task in tasks %}
            <tr data-task-id="{{ task.id }}" data-parent-id="{{ task.parent_id or 0 }}" class="task-row">
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    {{ task.name }}
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    {{ task.parent.name if task.parent else '无' }}
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    {{ task.milestone.name if task.milestone else '未分配' }}
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    {{ task.assignee.name if task.assignee else '未分配' }}
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm">
                    {% if task.priority == '高' %}
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                            {{ task.priority }}
                        </span>
                    {% elif task.priority == '中' %}
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-amber-100 text-amber-800">
                            {{ task.priority }}
                        </span>
                    {% elif task.priority == '低' %}
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                            {{ task.priority }}
                        </span>
                    {% endif %}
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    {{ task.start_date.strftime('%Y-%m-%d') if task.start_date else '未设置' }}
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    {{ task.end_date.strftime('%Y-%m-%d') if task.end_date else '未设置' }}
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm">
                    {% if task.status == '未开始' %}
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">
                            {{ task.status }}
                        </span>
                    {% elif task.status == '进行中' %}
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-indigo-100 text-indigo-800">
                            {{ task.status }}
                        </span>
                    {% elif task.status == '已完成' %}
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                            {{ task.status }}
                        </span>
                    {% endif %}
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                    <div class="flex space-x-2">
                        <a href="{{ url_for('task.edit_task', task_id=task.id) }}" class="text-indigo-600 hover:text-indigo-900">
                            <i class="fas fa-edit"></i>
                        </a>
                        <button class="delete-task text-red-600 hover:text-red-900" data-id="{{ task.id }}" data-name="{{ task.name }}">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </td>
            </tr>
            {% endfor %}
            
            <!-- 添加空行占位符，确保每页显示10行 -->
            {% if task_count < 10 %}
                {% for i in range(task_count, 10) %}
                <tr class="empty-row">
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-300">
                        &nbsp;
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-300">
                        &nbsp;
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-300">
                        &nbsp;
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
                        &nbsp;
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
                        &nbsp;
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
                        &nbsp;
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
                        &nbsp;
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
                        &nbsp;
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                        &nbsp;
                    </td>
                </tr>
                {% endfor %}
            {% endif %}
        </tbody>
    </table>
</div>

<!-- 分页控件 -->
{% if tasks_pagination.pages > 1 %}
<div class="sticky bottom-0 bg-white border-t border-gray-200 px-4 py-3 sm:px-6 mt-4">
    <div class="flex flex-1 justify-between sm:hidden">
        <a href="javascript:void(0);" 
           class="pagination-link relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 {% if not tasks_pagination.has_prev %}pointer-events-none opacity-50{% endif %}"
           data-page="{{ tasks_pagination.prev_num }}">
            上一页
        </a>
        <a href="javascript:void(0);" 
           class="pagination-link relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 {% if not tasks_pagination.has_next %}pointer-events-none opacity-50{% endif %}"
           data-page="{{ tasks_pagination.next_num }}">
            下一页
        </a>
    </div>
    <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
        <div>
            <p class="text-sm text-gray-700">
                显示第 <span class="font-medium">{{ (tasks_pagination.page - 1) * tasks_pagination.per_page + 1 }}</span> 至 
                <span class="font-medium">{{ tasks_pagination.page * tasks_pagination.per_page if tasks_pagination.page * tasks_pagination.per_page < tasks_pagination.total else tasks_pagination.total }}</span> 条，
                共 <span class="font-medium">{{ tasks_pagination.total }}</span> 条结果
            </p>
        </div>
        <div>
            <nav class="isolate inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
                <a href="javascript:void(0);" 
                   class="pagination-link relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0 {% if not tasks_pagination.has_prev %}pointer-events-none opacity-50{% endif %}"
                   data-page="{{ tasks_pagination.prev_num }}">
                    <span class="sr-only">上一页</span>
                    <i class="fas fa-chevron-left h-5 w-5" aria-hidden="true"></i>
                </a>
                
                <!-- 页码按钮 -->
                {% for p in tasks_pagination.iter_pages() %}
                    {% if p %}
                        {% if p != tasks_pagination.page %}
                            <a href="javascript:void(0);" 
                               class="pagination-link relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0"
                               data-page="{{ p }}">
                                {{ p }}
                            </a>
                        {% else %}
                            <span class="relative inline-flex items-center px-4 py-2 text-sm font-semibold bg-primary text-white focus:z-20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
                                {{ p }}
                            </span>
                        {% endif %}
                    {% else %}
                        <span class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-700 ring-1 ring-inset ring-gray-300 focus:outline-offset-0">
                            ...
                        </span>
                    {% endif %}
                {% endfor %}
                
                <a href="javascript:void(0);" 
                   class="pagination-link relative inline-flex items-center rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0 {% if not tasks_pagination.has_next %}pointer-events-none opacity-50{% endif %}"
                   data-page="{{ tasks_pagination.next_num }}">
                    <span class="sr-only">下一页</span>
                    <i class="fas fa-chevron-right h-5 w-5" aria-hidden="true"></i>
                </a>
            </nav>
        </div>
    </div>
</div>
{% endif %}

<script>
// 任务列表事件处理
document.addEventListener('DOMContentLoaded', function() {
    // 绑定删除任务事件
    bindDeleteTaskEvents();
});

// 绑定删除任务事件
function bindDeleteTaskEvents() {
    document.querySelectorAll('#tasks-container .delete-task').forEach(button => {
        button.addEventListener('click', function() {
            const taskId = this.getAttribute('data-id');
            const taskName = this.getAttribute('data-name');
            
            deleteTaskId.value = taskId;
            deleteTaskName.textContent = taskName;
            
            // 设置表单提交URL
            deleteTaskForm.action = `/tasks/${taskId}/delete`;
            
            deleteTaskModal.classList.remove('hidden');
        });
    });
}
</script>